<template>
	<div class="content">
		<div class="main" v-show="activeIndex==0">
			<div class="main_question">
				<span>请判断下面将要出现的图片是自然物还是人造物，同时请记住这些图片，之后还要请您判断图片是否出现过。</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_expBox">
				<div class="main_expBox_t">
					<img src="../../assets/exp_tip.png" alt="">
				</div>
				<div v-if="expStep<4" class="main_expImgBox">
					<img src="../../assets/img/help_1.png" alt="">
					<div class="main_expBox_btn" :class="expStep>1?'highlightBtn':''">
						自然物
						<img v-show="expStep==1||expStep==2" class="finger" src="../../assets/finger.png" alt="">
					</div>
					<div class="main_expBox_btn">人造物</div>
				</div>
				<!-- <div class="main_expBox_line"></div> -->
				<div v-if="expStep>3" class="main_expImgBox">
					<img src="../../assets/img/help_2.png" alt="">
					<div class="main_expBox_btn">自然物</div>
					<div class="main_expBox_btn" :class="expStep>5?'highlightBtn':''">
						人造物
						<img v-show="expStep==5||expStep==6" class="finger" src="../../assets/finger.png" alt="">
					</div>
				</div>
			</div>
			<div class="btnBox">
				<div v-on:click="nextBtn" class="nextBtn">开始测评</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==1">
			<div class="progress">
				<div class="progress_bar">
					<div :style="{width:((step1Index+1)/20*100)+'%'}" class="progress_bar_pb"></div>
				</div>
				<div class="progress_text">{{step1Index+1}}/20</div>
			</div>
			<div v-for="(item,index) of testCardArr" :key="index" v-show="(step1Index)==index" class="imgBox">
				<div class="cardRem">
					<div class="cardRem_left">
						<div class="cardRem_left_item"></div>
					</div><div class="cardRem_right">
						<div class="cardRem_right_item"></div>
					</div>
					<div class="cardRem_mask">{{remText}}</div>
				</div>
				<img class="imgBox_img" :src="require('../../assets/img/picture'+testCardArr[index]+'.png')" alt="">
			</div>
			<div class="choseBtnBox">
				<div v-on:click="step1Btn(1)" :class="step1SelectBtn==1?'highlightBtn':''" class="choseBtn">自然物</div>
				<div v-on:click="step1Btn(2)" :class="step1SelectBtn==2?'highlightBtn':''" class="choseBtn">人造物</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==2">
			<div class="main_question">
				<span>接下来请您判断，下面的图片之前是否已经出现过。</span>
				<img v-if="playingVoice==true" class="voice_icon" src="../../assets/voice_icon.gif" alt="">
				<img v-else v-on:click="touchVoiceIcon" class="voice_icon" src="../../assets/voice_icon.png" alt="">
			</div>
			<div class="main_expBox">
				<div class="main_expBox_t">
					<img src="../../assets/exp_tip.png" alt="">
				</div>
				<div v-if="expStep<4" class="main_expImgBox">
					<img src="../../assets/img/help_3.png" alt="">
					<div class="main_expBox_btn" :class="expStep>1?'highlightBtn':''">
						没出现过
						<img v-show="expStep==1||expStep==2" class="finger" src="../../assets/finger.png" alt="">
					</div>
					<div class="main_expBox_btn">出现过</div>
				</div>
				<!-- <div class="main_expBox_line"></div> -->
				<div v-if="expStep>3" class="main_expImgBox">
					<img src="../../assets/img/help_2.png" alt="">
					<div class="main_expBox_btn">没出现过</div>
					<div class="main_expBox_btn" :class="expStep>5?'highlightBtn':''">
						出现过
						<img v-show="expStep==5||expStep==6" class="finger" src="../../assets/finger.png" alt="">
					</div>
				</div>
			</div>
			<div class="btnBox">
				<div v-on:click="nextBtn" class="nextBtn">开始测评</div>
			</div>
		</div>
		<div class="main" v-show="activeIndex==3">
			<div class="progress">
				<div class="progress_bar">
					<div :style="{width:((step2Index+1)/30*100)+'%'}" class="progress_bar_pb"></div>
				</div>
				<div class="progress_text">{{step2Index+1}}/30</div>
			</div>
			<div v-for="(item,index) of memoryCardArr" :key="index" v-show="(step2Index)==index" class="imgBox">
				<img class="imgBox_img" :src="require('../../assets/img/picture'+memoryCardArr[index]+'.png')" alt="">
			</div>
			<div class="choseBtnBox">
				<div v-on:click="step2Btn(1)" :class="step2SelectBtn==1?'highlightBtn':''" class="choseBtn">没出现过</div>
				<div v-on:click="step2Btn(2)" :class="step2SelectBtn==2?'highlightBtn':''" class="choseBtn">出现过</div>
			</div>
		</div>
		<audio
			:src="voiceSrc"
			controls="controls"
			ref="audio"
			autoplay="autoplay"
			@ended="stopVoice"
		  >Your browser does not support the audio element.</audio>
	</div>
</template>

<script>
	import api from "@/api";
	import Cookies from 'js-cookie';
	import Vue from 'vue';
	import { Toast } from 'vant';
	import { Dialog } from 'vant';
	Vue.use(Toast);
	export default {
		components: { },
		name: 'emt-main',
		data() {
			return {
				activeIndex:0,
				remText:4,
				expStep:0,
				voiceSrc:'',
				nextRoute:'',
				testCardArr:[],
				memoryCardArr:[],
				expAni:undefined,
				step1Index:0,
				step2Index:0,
				step1SelectBtn:0,
				step2SelectBtn:0,
				step1SelectArr:[],
				step2SelectArr:[],
				step1ReactionArr:[],
				step2ReactionArr:[],
				canTouch:true,
				startReactionTime:0,
				selectReactionTime:0,
				startTime:new Date().getTime(),
				codingData:[],
				recognitionData:[],
				codingAccuracy:0,
				recognitionAccuracy:0,
				sucCount:0,
				playingVoice:false,
				saving:false
			};
		},
		computed: {
			
		},
		async mounted() {
			this.expAni=setInterval(this.playExp,500);
			var arr1 = [],
				arr2 = [],
				arr3 = [];
			while (arr1.length < 10) {
				let num = Math.floor(Math.random() * (15-1+1))+1;
				if (arr1.indexOf(num) == -1) {
					arr1.push(num);
				}
			}
			while (arr2.length < 10) {
				let num = Math.floor(Math.random() * (30-16+1))+16;
				if (arr2.indexOf(num) == -1) {
					arr2.push(num);
				}
			}
			this.testCardArr = arr1.concat(arr2);
			this.testCardArr.sort(function() {
				return Math.random() > 0.5 ? -1 : 1
			})
			console.log(this.testCardArr)
			while (arr3.length < 10) {
				let num = Math.floor(Math.random() * (50-31+1))+31;
				if (this.testCardArr.indexOf(num) == -1 && arr3.indexOf(num) == -1) {
					arr3.push(num);
				}
			}
			this.memoryCardArr = this.testCardArr.concat(arr3);
			this.memoryCardArr.sort(function() {
				return Math.random() > 0.5 ? -1 : 1
			})
			// 先加载再判断
			this.loadVoice().then(() => {
				// 判断是否支持自动播放
				this.testAutoPlay().then((res) => {
					// console.log('testAutoPlay res', res);
					if (res) {
						this.playVoice();
					}
				}).catch((err) => {
					console.log('testAutoPlay err', err);//testAutoPlay
				});
			});
		},
		methods: {
			testAutoPlay () {
				// 返回一个promise以告诉调用者检测结果
				return new Promise(resolve => {
					let audio = document.createElement('audio');
					// require一个本地文件，会变成base64格式
					audio.src = require('../../assets/empty-audio.mp3');
					document.body.appendChild(audio);
					let autoplay = true;
					// play返回的是一个promise
					audio.play().then(() => {
						// 支持自动播放
						autoplay = true;
					}).catch(err => {
						// 不支持自动播放
						autoplay = false;
					}).finally(() => {
						// audio.remove();
						// 告诉调用者结果
						resolve(autoplay);
					});
				});
			},
			touchVoiceIcon(){
				console.log('touchVoiceIcon');
				this.loadVoice().then(this.playVoice);
			},
			async loadVoice(){
				console.log('loadVoice');
				this.voiceSrc=require('../../assets/voice/babriEmt/helpSound'+(Math.floor(this.activeIndex/2)+1)+'.mp3');
				console.log('voiceSrc', this.voiceSrc);
			},
			playVoice(){
				console.log('playVoice');
				this.playingVoice=true;
				this.$refs.audio.play();
			},
			stopVoice(){
				this.playingVoice=false;
				this.$refs.audio.pause();
			},
			async save(){
				if(this.saving==true){
					return
				}
				this.saving=true;
				let params={
					evaluationType:Cookies.get("patientVersion"),
					codingData:JSON.stringify(this.codingData),
					recognitionData:JSON.stringify(this.recognitionData),
					recognitionAccuracy:this.recognitionAccuracy,
					masterId:Cookies.get("masterId"),
					groupId:Cookies.get("groupId"),
					patientId:Cookies.get("patientId"),
					doctorId:Cookies.get('doctorId'),
					createUser:Cookies.get('doctorId'),
					startDate:this.startTime,
					summitDate:new Date().getTime(),
					codingAccuracy:this.codingAccuracy,
					source:'',
					scaleId:302,
					evaluationName:'emt_new',
					submitStatus:1
				};
				console.log(params)
				try {
				  let res = await api.emtSave(params);
				  if (res.code == 1) {
					  // this.$router.push({ path: '/emt-end' ,query:{route:res.data.nextRoute}});
					  this.nextRoute=res.data.nextRoute;
					  this.finish();
				  }else{
					  Toast(res.msg);
					  this.saving=false;
					  this.canTouch=true;
				  }
				} catch (e) {
					// Toast(e);
					this.saving=false;
					this.canTouch=true;
					console.log(e);
				}
			},
			async finish(){
				this.saving=true;
				let params={
					masterId:Cookies.get('masterId')
				};
				try {
				  let res = await api.updateFinishStatus(params);
				  if (res.code == 1) {
					
					this.saving=false;
					// this.commonApi.nextRoute(this.nextRoute)
					// this.$router.replace('/mini-report')
					this.$router.push({
						path:'/messageBox',
						query:{id:1,path:'mini-report'}
					})
				  }else{
					this.saving=false;
				  }
				} catch (e) {
					this.saving=false;
				  console.log(e);
				}
			},
			playExp(){
				if(this.expStep<7){
					this.expStep+=1;
				}else{
					this.expStep=0;
				}
			},
			nextBtn(){
				this.activeIndex+=1;
				this.stopVoice();
				if(this.activeIndex==1){
					this.startReactionTime=new Date().getTime();
					setTimeout(this.cardRemFuc,1000)
				}else if(this.activeIndex==3){
					this.startReactionTime=new Date().getTime();
				}
			},
			step1Btn(num){
				if(this.step1SelectBtn==num){
					Toast('每幅图片需要等待4秒');
					return;
				}
				this.step1SelectBtn=num;
				this.step1SelectArr.splice(this.step1Index,1,num);
				this.selectReactionTime=new Date().getTime();
				var reactionTime=this.selectReactionTime-this.startReactionTime
				this.step1ReactionArr.splice(this.step1Index,1,(reactionTime>4000)?4000:reactionTime);
			},
			step2Btn(num){
				if(this.canTouch==false){
					return;
				}
				this.canTouch=false;
				if(this.recognitionData.length<30){
					this.step2SelectBtn=num;
					this.step2SelectArr.splice(this.step2Index,1,num);
					this.selectReactionTime=new Date().getTime();
					var reactionTime=this.selectReactionTime-this.startReactionTime
					this.step2ReactionArr.splice(this.step2Index,1,reactionTime);
					var imgId=this.memoryCardArr[this.step2Index];
					var imgType=this.testCardArr.indexOf(imgId)==-1?1:2;
					var blance=this.step2SelectBtn==imgType?1:0;
					if(blance==1){
						this.sucCount+=1;
					}
					
					this.recognitionData.push([imgId,imgType,this.step2SelectBtn,blance,reactionTime])
				}
				var that=this;
				setTimeout(function(){
					if(that.step2Index<29){
						that.step2Index += 1;
						that.startReactionTime=new Date().getTime();
						that.canTouch = true;
						that.step2SelectBtn=0;
					}else{
						that.recognitionAccuracy=(that.sucCount/30).toFixed(2);
						that.save()
					}
				},500);			
			},
			cardRemFuc(){
				let that=this;
				this.remText-=1
				if(this.remText!=0){
					setTimeout(this.cardRemFuc,1000)
				}else{
					this.step1SelectArr.splice(this.step1Index,1,this.step1SelectBtn);
					if(this.step1SelectBtn==0){
						this.step1ReactionArr.splice(this.step1Index,1,-1);
					}
					var imgId=this.testCardArr[this.step1Index];
					var imgType=imgId<=15?1:2;
					var blance=this.step1SelectBtn==imgType?1:0;
					if(blance==1){
						this.sucCount+=1;
					}
					this.codingData.push([imgId,imgType,this.step1SelectBtn,blance,this.step1ReactionArr[this.step1Index]])
					if(this.step1Index<19){
						this.step1Index += 1;
						this.remText = 4;
						this.canTouch = true;
						this.step1SelectBtn=0;
						this.startReactionTime=new Date().getTime();
						setTimeout(this.cardRemFuc,1000)
					}else{
						this.codingAccuracy=(this.sucCount/20).toFixed(2);
						this.sucCount=0;
						this.canTouch=true;
						this.activeIndex+=1;
						this.touchVoiceIcon();
					}
				}
			}
		}
	};
</script>

<style scoped>
	.content{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.progress{
		width: 100%;
		box-sizing: border-box;
		background-color: #F6F7FC;
		padding: 6px 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.progress_bar{
		width: 300px;
		height: 4px;
		background-color: #ffffff;
	}
	.progress_bar_pb{
		height: 100%;
		width: 80%;
		background-color: #4174F7;
	}
	.progress_text{
		color: #4174F7;
		font-size: 14px;
		font-weight: 500;
	}
	.main{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.main_question{
		margin-top: 5px;
		color: #333333;
		font-size: 20px;
		font-weight: 500;
		padding: 15px;
	}
	.main_question>span{
		vertical-align: middle;
	}
	.main_expBox{
		border: 2px solid rgba(65, 116, 247, 0.31);
		width: 345px;
		height: 290px;
		border-radius: 30px;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		padding-top: 10px;
		padding-bottom: 14px;
		box-sizing: border-box;
		margin-top: 23px;
	}
	.main_expBox_t{
		width: 100%;
		position: absolute;
		top: 0;
		text-align: center;
	}
	.main_expBox_t>img{
		width: 50px;
		height: 23px;
	}
	.main_expImgBox>img{
		width: 155px;
		height: 155px;
	}
	.main_expBox_btn{
		width: 150px;
		padding: 5px;
		font-size: 15px;
		color: #333333;
		border-radius: 5px;
		background-color: #F6F7FC;
		text-align: center;
		margin-top: 5px;
		position: relative;
		box-sizing: border-box;
	}
	.main_expBox_btn:nth-child(2){
		margin-top: 17px;
	}
	.main_expImgBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 38px;
		box-sizing: border-box;
	}
	.main_expBox_line{
		height: 195px;
		border-left: 1px solid #C3D3FC;
	}
	.finger{
		width: 24px;
		height: 23px;
		position: absolute;
		top: 18px;
		left: 102px;
	}
	.btnBox{
		background-color: #ffffff;
		box-shadow: 0px -2px 10px 0px rgba(232, 232, 232, 0.5);
		padding: 12px 14px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.nextBtn{
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   width: 100%;
       height: 50px;
	   background-color: #4174F7;
	   border-radius: 44px;
	   color: #ffffff;
	   text-align: center;
	   padding: 9px 0;
	   font-size: 16px;
	   font-weight: 400;
	}
	.imgBox{
		width: 250px;
		height: 250px;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		top:17%;
	}
	.imgBox>img{
		width: 100%;
		height: 100%;
	}
	.choseBtnBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 8%;
	}
	.choseBtn{
		width: 300px;
		background-color: #F6F7FC;
		font-size: 18px;
		color: #333333;
		padding: 12px 0;
		text-align: center;
		border-radius: 21px;
		margin-top: 15px;
	}
	.highlightBtn{
		background-color: #4174F7;
		color: #ffffff;
	}
	.cardRem{
		width: 50px;
		height: 50px;
		position: absolute;
		top: -19%;
		right:-12%;
		overflow: hidden;
		border-radius: 50%;
		background-color: #F4F4F4;
	}
	.cardRem_left,.cardRem_right{
		position: absolute;
		top: 0;
		width: 25px;
		height: 50px;
		overflow: hidden;
		z-index: 1;
	}
	.cardRem_left{
		left: 0;
	}
	.cardRem_right{
		right: 0.5%;
	}
	.cardRem_left_item,.cardRem_right_item{
		width: 25px;
		height: 50px;
	}
	.cardRem_left_item{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		-webkit-transform-origin: right center;
		transform-origin: right center;
		-webkit-animation: loading_left 4s linear;
		background-color: #F4F4F4;
	}
	.cardRem_right_item{
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		-webkit-transform-origin: left center;
		transform-origin: left center;
		-webkit-animation: loading_right 4s linear;
		background-color: #F4F4F4;
	}
	.cardRem_mask{
		position: absolute;
		top: 6px;
		left: 6px;
		right: 6px;
		bottom: 6px;
		z-index: 2;
		border-radius: 50%;
		background-color: #fff;
		color: #1073EE;
		font-size: 27px;
		text-align: center;
		line-height: 21px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	@-webkit-keyframes loading_left{
		0%{
			-webkit-transform: rotate(0deg);
			background-color: #1073EE;
		}
		50%{
			-webkit-transform: rotate(0deg);
		}
		100%{
			-webkit-transform: rotate(180deg);
			background-color: #1073EE;
		}
	}
	@-webkit-keyframes loading_right{
		0%{
			-webkit-transform: rotate(0deg);
			background-color: #1073EE;
		}
		50%{
			-webkit-transform: rotate(180deg);
		}
		100%{
			-webkit-transform: rotate(180deg);
			background-color: #1073EE;
		}
	}
	audio{
		position: absolute;
		top: -1000px;
		opacity: 0;
	}
	.voice_icon{
		width: 23px;
		height: 19px;
		display: inline;
		vertical-align: middle;
		margin-left: 10px;
	}
</style>